<template>
    <div class="search_list">
        <div class="search_head">
            <div class="search_input">
                <i class="icon iconfont icon-sousuo"></i>
                <input type="text" placeholder="请输入大师姓名、问题等" v-model="searchTerms">
            </div>
            <div class="search_btn">
                <span @click="clickSearch">搜索</span>
                <span @click="showData = false">取消</span>
            </div>
        </div>
        <div class="recommend" v-if="!showData">
            <dl v-for="(item, key) in searchLists" :key="key">
                <dt class="f28">{{item.title}}</dt>
                <dd>
                    <span v-for="(it, ind) in item.data" :key="ind" @click="clickRecom(item.title, it)">{{(it.name ? it.name : it.title) ? (it.name ? it.name : it.title) : it}}</span>
                </dd>
            </dl>
        </div>
        <div class="search_result" v-if="showData">
            <div class="search_result1" v-for="(i, k) in result" :key="k">
                <p>{{i.classify}}({{i.num}})</p>
                <mlist v-if="!k" :masters="result[0].data"></mlist>
                <ques-item v-if="k && result[1].data" :item="result[1].data"></ques-item>
                <div class="more" @click="searchResult(i.classify)">查看更多{{k && result[1].data ? '闪问' : '大师'}} <i class="icon iconfont icon-youjiantou1"></i></div>
            </div>
        </div>
    </div>
</template>

<script>
    import mlist from '@/views/master/mlist';
    import quesItem from "@/components/quesItem";
    export default {
        name: 'searchList',
        components: {
            mlist,
            quesItem
        },
        data() {
            return {
               searchLists: [
                   {
                       title: '历史记录',
                       data: []
                   },{
                       title: '热门大师',
                       data: [
                           {
                               name: '',
                           }
                       ]
                   },{
                       title: '热门闪问',
                       data: [
                           {
                               name: '',
                           }
                       ]
                   }
               ],
               result: [
                   {
                       classify: '相关大师',
                       num: 0,
                       data: []
                   },{
                       classify: '相关闪问',
                       num: 0,
                       data: {}
                   }
               ],
               searchTerms: '',
               showData: false
            }
        },
        methods: {
            getmasterlist(keyword) {
                let params = {}
                if(!keyword){
                    params = {
                        offset: 0,
                        limit: 10
                    }
                } else {
                    params = {
                        keyword: keyword,
                        offset: 0,
                        limit: 1000
                    }
                }
                this.$http.fetchGet('getmasterlist', params).then(res => {
                    if(res.code == 200) {
                        this.result[0]['num'] = res.data.length
                        if(!keyword) this.searchLists[1]['data'] = res.data
                        else this.result[0]['data'] = res.data.slice(0,1)
                    }
                })
            },
            relateFlashquizList(keyword) {
                let params = {}
                if(!keyword){
                    params = {
                        limit: 10
                    }
                } else {
                    params = {
                        keyword: keyword,
                        limit: 1000
                    }
                }
                this.$http.fetchGet('relateFlashquizList', params).then(res => {
                    if(res.code == 200) {
                        this.result[1]['num'] = res.data.length
                        if(!keyword) this.searchLists[2]['data'] = res.data
                        else this.result[1]['data'] = res.data[0]
                    }
                })
            },
            clickSearch() {
                this.showData = true
                this.getmasterlist(this.searchTerms)
                this.relateFlashquizList(this.searchTerms)
                if(this.searchLists[0].data.indexOf(this.searchTerms) == -1) {
                    this.searchLists[0].data.unshift(this.searchTerms)
                    this.searchLists[0].data = this.searchLists[0].data.slice(0, 10)
                    let storage = window.localStorage;
                    storage.setItem('searchHistory', this.searchLists[0].data)
                }
            },
            getStorage() {
                let storage = window.localStorage;
                this.searchLists[0].data = storage.getItem('searchHistory').split(',');
            },
            clickRecom(tit, item) {
                if(tit == '历史记录') {
                    this.searchTerms = item
                    this.clickSearch()
                } else if(tit == '热门大师') {
                    this.$router.push({
                        path: '/mdetail',
                        query: {
                            id: item.id
                        }
                    })
                } else if (tit == '热门闪问') {
                    this.$router.push({
                        path: '/questiondetail',
                        query: {
                            fqId: item.fqId
                        }
                    })
                }
            },
            searchResult(tit) {
                this.$router.push({
                    path: '/searchResult',
                    query: {
                        type: tit,
                        kw: this.searchTerms
                    }
                })
            }
        },
        mounted() {
            this.getmasterlist()
            this.relateFlashquizList()
            this.getStorage()
        }
    }
</script>

<style lang="less" scoped>
    .search_list{
        width: 100%;
        height: 100%;
        .search_head{
            width: 100%;
            .padd(20, 20);
            display: flex;
            box-sizing: border-box;
            .search_input{
                flex: 1;
                display: flex;
                border: 1px solid #666;
                border-radius: 20px;
                overflow: hidden;
                background: #fff;
                .pr(15);
                .h(60);
                i.icon{
                    display: inline-block;
                    text-align: center;
                    .w(50);
                    .lh(60);
                }
                input{
                    flex: 1;
                    border: none;
                    outline:none;
                }
            }
            .search_btn{
                .w(140);
                .lh(60);
                text-align: right;
                span{
                    .ml(10);
                    color: #999;
                    &:nth-child(1){
                        color: #189BEB;
                    }
                }
            }
        }
        .recommend{
            width: 100%;
            .padd(0, 20);
            box-sizing: border-box;
            dl{
                dt{
                    .lh(60);
                    font-weight: 700;
                }
                dd{
                    display: flex;
                    flex-wrap: wrap;
                    span{
                        .padd(10, 20);
                        .mr(20);
                        .mt(10);
                        .mb(10);
                        background: #f2f2f2;
                        border-radius: 5px;
                    }
                }
            }
        }
        .search_result{
            background: #f2f2f2;
            .search_result1{
                .mb(10);
                background: #fff;
                p{
                    .lh(88);
                    border-bottom: 1px solid #f2f2f2;
                    border-top: 1px solid #f2f2f2;
                    font-weight: 700;
                    .padd(0, 20);
                }
                .more{
                    .lh(60);
                    text-align: center;
                    border-top: 1px solid #f2f2f2;
                    color: #666;
                    i.icon{
                        vertical-align: middle;
                    }
                }
            }
        }
    }
</style>
